<template>
    <div>
        <el-card class="!border-none mb-4" shadow="never">
            <el-form class="mb-[-16px]" :model="queryParams" inline>
                <el-form-item label="应用名称" prop="name">
                    <el-input class="w-[280px]" v-model="queryParams.name" clearable placeholder="请输入应用名称" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="resetPage">查询</el-button>
                    <el-button @click="resetParams">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="!border-none" v-loading="pager.loading" shadow="never">


            <el-card class="!border-none" v-loading="pager.loading" shadow="never">
                <div style="display: flex;flex-wrap: wrap;">

                    <div v-for="item in pager.lists" class="box-yy" @click="handleClick(item)">
                        <div style="display: flex;align-items: center;">
                            <div style="min-width: 56px;min-height: 56px;">
                                <img :src="item.app_icon" style="width: 56px;height: 56px;border-radius: 8px;" />
                            </div>
                            <div style="margin-left: 24px;">
                                <div style="font-size: 24px;font-weight: 400;">{{ item.name }}</div>
                                <div
                                    style="font-size: 12px;font-weight: 400;color:rgba(56, 56, 56, 1);margin-top: 8px;word-break: break-all;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden;">
                                    {{ item.desc }}</div>
                            </div>
                        </div>
                        <div style="display: flex;justify-content: flex-end;padding-bottom: 5px;margin-top: 10px;">
                            <img src="../../assets/images/right.png" style="width: 22px;height: 22px;" />
                        </div>

                        <div v-if="item.is_buy == 2" class="tabaz">未安装</div>
                        <div v-if="item.is_buy == 0" class="tabgm">未购买</div>

                    </div>

                </div>
            </el-card>



        </el-card>
        <edit-popup v-if="showEdit" ref="editRef" :dict-data="dictData" @success="getLists" @close="showEdit = false" />
    </div>
</template>

<script lang="ts" setup name="management">
import { usePaging } from "@/hooks/usePaging";
import { useDictData } from "@/hooks/useDictOptions";
import { apiInstallappLists, apiInstallappDelete, getAdminToken } from "@/api/installapp";
import { timeFormat } from "@/utils/util";
import feedback from "@/utils/feedback";
import EditPopup from "./managementedit.vue";

const editRef = shallowRef<InstanceType<typeof EditPopup>>();
// 是否显示编辑框
const showEdit = ref(false);

// 查询条件
const queryParams = reactive({
    name: "",
    create_time: "",
    uninstall_time: "",
});

// 选中数据
const selectData = ref<any[]>([]);


//跳转安装页面
// 
const handleClick = async (item: any[]) => {
    if (item.is_buy == 2) {
        window.location.href = "/admin/#/application/package";
    }
    else if (item.is_buy == 0) {

        window.open("https://www.xiaojiangy.com/web/?clumn_id=48&app_id=" + item.id, "_blank");
    }
    else if (item.is_buy == 1) {

        const res = await getAdminToken();

        var currentUrlPrefix = window.location.origin; // 包含协议、主机名和端口

        var targetUrl = currentUrlPrefix + "/tenant/#/login?redirect=/&login_type=3&app=" + item.app + '&swbs9=' + res.token;

        // 跳转到目标路径
        window.open(targetUrl);



        console.log(res);
    }
    //直接进应用 



    //2. 返回token 直接跳转



};

// 表格选择后回调事件
const handleSelectionChange = (val: any[]) => {
    selectData.value = val.map(({ id }) => id);
};

// 获取字典数据
const { dictData } = useDictData("");

// 分页相关
const { pager, getLists, resetParams, resetPage } = usePaging({
    fetchFun: apiInstallappLists,
    params: queryParams,
});

// 添加
const handleAdd = async () => {
    showEdit.value = true;
    await nextTick();
    editRef.value?.open("add");
};

// 编辑
const handleEdit = async (data: any) => {
    showEdit.value = true;
    await nextTick();
    editRef.value?.open("edit");
    editRef.value?.setFormData(data);
};

// 删除
const handleDelete = async (id: number | any[]) => {
    await feedback.confirm("确定要删除？");
    await apiInstallappDelete({ id });
    getLists();
};

getLists();
</script>
<style>
.box-yy {
    margin-left: 10px;
    margin-top: 10px;
    width: 24%;
    min-width: 308px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(227, 239, 241, 1) 0%, rgba(103, 241, 255, 1) 100%);
    padding: 19px 19px 0px 19px;
    position: relative;
}

.box-yy .tabaz {
    position: absolute;
    top: 0;
    right: 0;
    padding: 2px 8px;
    background-color: rgb(250, 57, 57);
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    color: #fff;
}

.box-yy .tabgm {
    position: absolute;
    top: 0;
    right: 0;
    padding: 2px 8px;
    background-color: rgb(255, 141, 26);
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    color: #fff;
}
</style>